<template>
  <div class="sec-top">
    <button class="btn btn-sm btn-primary" @click="backActivity">返回{{aName}}活动</button>
    <vue-import-code :prize-id="pId"></vue-import-code>
    <vue-code-excel :show-code-excel.sync="showCodeExcel" :prize-id="pId"></vue-code-excel>
    <vue-export-code :show-export.sync="showExport" :prize-id="pId"></vue-export-code>
    <span class="total-count">兑换码总数: <b>{{ totalNum }}</b>&nbsp;&nbsp;未被使用的个数: <b>{{ notUsedNum }}</b></span>
  </div>
  <table class="table table-bordered table-hover">
  <caption>{{pName}}的兑换码</caption>
    <thead>
      <tr>
        <th class="col-sm-2">兑换码记录ID</th>
        <th class="col-sm-3">兑换码</th>
        <th class="col-sm-2">是否被使用</th>
        <th class="col-sm-3">兑换码有效期</th>
        <th class="col-sm-2"></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="pCode in codeList">
        <td>{{pCode.id}}</td>
        <td>{{pCode.code}}</td>
        <td>{{pCode.hasUsed | CodeHasUsed}}</td>
        <td>{{pCode.expireTime}}</td>
        <td class="text-right">
          <button class="btn btn-sm btn-primary" @click="removeCode(pCode.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
<vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
</template>
<script src="./code-list.js"></script>
<style src="./code-list.css" scoped></style>
